<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
	<meta charset="utf-8">
	<title>freeswitch设备管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body class="childrenBody"  style="-webkit-backface-visibility: hidden;">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<label class="layui-form-label" style="width: 71px;padding: 9px 5px;">所属公司：</label>
					<div class="layui-input-block" style="margin-left: 81px">
						<select name="belongCompany" lay-filter="belongCompany" >
							<option value="">全部</option>
							<option th:each="belongCompany:${belongCompanys}" th:value="${belongCompany.value}"  th:text="${belongCompany.desc}"></option>
						</select>
					</div>
				</div>
				<!--<div class="layui-input-inline">-->
					<!--<input type="text" class="layui-input searchVal" placeholder="所属公司"  name = "belongCompany" id = "belongCompany"/>-->
				<!--</div>-->
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="设备编号"  name = "num" id = "num"/>
				</div>
				<div class="layui-input-inline">
					<label class="layui-form-label" style="width: 71px;padding: 9px 5px;">卡槽状态：</label>
					<div class="layui-input-block" style="margin-left: 81px">
						<select name="slotState" lay-filter="slotState" >
							<option value="">全部</option>
							<option th:each="slotState:${slotStates}" th:value="${slotState.value}"  th:text="${slotState.desc}"></option>
						</select>
					</div>
				</div>

				<a class="layui-btn search_btn" lay-submit data-type="reload" lay-filter="query">搜索</a>
			</div>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal addNews_btn" id ="addGateway" style="display: none">添加设备</a>
			</div>

		</form>
	</blockquote>
	<table id="gatewayCardSlotList" lay-filter="gatewayCardSlotList"></table>

	<!--操作-->
	<script type="text/html" id="newsListBar">

	</script>
</form>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>

<script type="text/javascript" >


	layui.use(['table','form'], function(){
	var table = layui.table,
        form = layui.form;
        var mytable = table.render({
            elem: '#gatewayCardSlotList'
            ,url:path+"/gatewayCardSlot/listGatewayCardSlots"
            ,title: '设备'
            ,where:{    //条件
            }
            ,cols: [ [ //标题栏
                {field: 'equipment', title:'设备商', width:122}
                ,{field: 'computerRoom', title:'机房', width:135}
                ,{field: 'rack', title:'机架', width:124}
                ,{field: 'belongCompany', title:'所属公司', width:107}
//                ,{field: 'belongUnit', title:'所属部门', width:120}
                ,{field: 'num', title:'设备编号', width:160}
                ,{field: 'channelNum', title:'设备线路数', width:114}
                ,{field: 'slotNum', title:'设备卡槽数', width:114}
                ,{field: 'usingSlotNum', title:'设备插卡数', width:114}
                ,{field: 'channel', title:'当前线路编号', width:114}
                ,{field: 'slotIndex', title:'当前卡槽编号', width:114}
                ,{field: 'ccid', title:'当前卡id', width:114}
                ,{field: 'slotState', title:'当前卡槽状态', width:180,align:'center',templet: function(d){
                    if(d.slotState=="已插卡未使用"){
                        return "<button class='layui-btn layui-btn-warm layui-btn-sm layui-btn-radius' style='width: 140px'>"+d.slotState+"</button>";
					}else if(d.slotState=="未插卡"){
						return "<button class='layui-btn layui-btn-sm layui-btn-radius' style='width: 140px'>"+d.slotState+"</button>";
					}else if(d.slotState=="已插卡但是呼叫超限制"){
                        return "<button class='layui-btn layui-btn-danger layui-btn-sm layui-btn-radius' style='width: 140px'>"+d.slotState+"</button>";
					}else if(d.slotState=="使用中"){
                        return "<button class='layui-btn layui-btn-normal layui-btn-sm layui-btn-radius' style='width: 140px'>"+d.slotState+"</button>";
					}else {
                        return "<button class='layui-btn layui-btn-disabled layui-btn-sm layui-btn-radius' style='width: 140px'>"+d.slotState+"</button>";
					}

                }}
                ,{field: 'simCardNum', title:'当前线路使用号码', width:161}
                ,{field: 'city', title:'电话号码所属城市', width:160}
            ]]


            ,page: true
//		,response: {
//		statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
//		}
            ,even: true
            ,page: {   //自定义分页条
                limit: 10
                ,curr: 1
                ,theme: '#5FB878'
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em><i class="layui-icon">&#xe603;</i></em>'
                ,next: '<em><i class="layui-icon">&#xe602;</i></em>'
                ,layout: [ 'prev', 'page', 'next', 'skip']
                ,hash:"offset"
            }
            ,done: function(res, curr, count){

            }
            ,request: {
                pageName: 'offset' //页码的参数名称，默认：page
                ,limitName: 'limit' //每页数据量的参数名，默认：limit
            }
        });


        var tableReload = function (data) {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where:{
                    "params['belongCompany']":data.belongCompany,
					"params['num']":data.num,
                    "params['slotState']":data.slotState
				}
                , done: function (res, curr, count) {

                }
            })

	}
	/**
	 * 监听查询按钮
	 *
	 */
	form.on('submit(query)', function(data){
		tableReload(data.field);
	});

    });
</script>
</body>
</html>